<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>同咨科技-商户后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link href="../../lib/layui/css/layui.css" rel="stylesheet">

    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="module" src="../components/use-body.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->



    <link href="../../static/css/tenders.css" rel="stylesheet">
    <link href="../../static/css/uselay.css" rel="stylesheet">

</head>

<body>
    <use-body>
        <div class="page-body write-file" id="app">
            <div class="page-border pd0 mt30 tenders-head">
                <div class="page-title">
                    <div>
                        <span class="layui-font-18"><strong>项目名称：</strong></span>
                        <span>这是项目名称项目名称项目名称项目名称</span>
                    </div>
                    <div>
                        <button type="button" class="layui-btn layui-btn-primary">
                            <i class="iconfont use-save"></i>
                            保存草稿
                        </button>
                        <button type="button" class="layui-btn layui-btn-radius">
                            <i class="iconfont use-suoding"></i>
                            完成并锁定
                        </button>
                        <button type="button" class="layui-btn layui-btn-radius">
                            <i class="iconfont use-baocun"></i>
                            另存为样板
                        </button>
                    </div>
                </div>
                <!-- 招标信息 -->
                <div class="tenders-info">
                    <div class="layui-row layui-col-space30">
                        <div class="layui-col-xs6">
                            <div class="title layui-font-18">招标项目信息</div>
                            <div class="layui-row  layui-col-space30">
                                <div class="layui-col-xs6 ellipsis-1">
                                    <div class="cell big">
                                        项目规模：项目规模规模规模规模模规模模规模模规模项目规模规模规模规模模规模模规模模规模项目规模规模规模规模模规模模规模模规模项目规模规模规模规模模规模模规模模规模
                                    </div>
                                    <div class="cell ellipsis-1">招标人：我qweqwe请问其戊二醛我饿问问qwe</div>
                                    <div class="cell">代理单位：</div>
                                </div>
                                <div class="layui-col-xs6 ">
                                    <div class="cell ellipsis-1">招标项目所属板块：qweqwe qwe我去恶趣味企鹅请问恶趣味恶趣味问</div>
                                    <div class="cell">招标金额：</div>
                                    <div class="cell">项目编号：</div>
                                    <div class="cell">项目负责人：</div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="title layui-font-18">招标模板信息</div>
                            <div class="layui-row layui-col-space30">
                                <div class="layui-col-xs6">
                                    <div class="cell">模板名称：全国通用格式模板V1.0</div>
                                    <div class="cell">招标方式：公开招标</div>
                                    <div class="cell">评标办法：综合评标法</div>
                                    <div class="cell">评分办法：电子评分</div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="cell">招标大类：服务类</div>
                                    <div class="cell">招标分类：设计</div>
                                    <div class="cell big">模板简介：模板简介模板简介模板简介模板简介模板简介</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="collapseBtn">
                    <i class="layui-icon layui-icon-up"></i>
                </div>
            </div>

            <div class="tenders-main">
                <!-- <div class="page-border">
                    <div class="title layui-font-20">导航区</div>
                    <div id="ID-tree-demo-showLine"></div>
                </div> -->
                <div class="page-border">
                    <div class="title layui-font-20">招标文件填写区域</div>
                    <div class="laypage">
                        <div class="info">
                            <span>已填写 <i class="layui-font-blue">5</i> 项</span>
                            <span>待填写 <i class="layui-font-blue">5</i> 项</span>
                            <span>共计 <i class="layui-font-blue">45</i> 项</span>
                        </div>
                        <div id="demo-laypage-layout" style="text-align: right;"></div>
                    </div>
                    <div class="file">
                        <div class="pages" v-for="page in data">
                            <div class="img">
                                <img :src="page.img_path" alt="" srcset="">
                            </div>
                            <div class="el border" v-for="item in page.keyword" :style="{
                                    left: item.x0+'px',
                                    top: item.y0+'px',
                                    minWidth:(item.x1- item.x0)+'px',
                                    minHeight: (item.y1- item.y0)+'px',
                                    lineHeight:(item.y1- item.y0)+'px'
                                }" @click="fun(item)">{{item.keyword}}</div>
                        </div>
                    </div>
                </div>
                <div class="page-border">
                    <div class="title layui-font-20">填写项 输入区</div>

                    <div class="item-title" style="justify-content: center;">
                        <span>《项目名称》类型：文本框</span>
                    </div>
                    <textarea placeholder="请输入简介内容" class="layui-textarea"></textarea>
                    <div class="layui-btn-box">
                        <button type="button" class="layui-btn layui-btn-sm btn-text">取消</button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-radius">确认</button>
                    </div>

                    <div class="item-title">
                        <span>填写指南框</span>
                        <span>本项总 <i class="layui-font-blue">5</i> 个指南</span>
                    </div>
                    

                    <div class="item-text">
                        <div>
                            <span>《项目名称》</span>
                            <span>ZBGQ01010101</span>
                        </div>
                        <div>30日历天。其中: 勘察15日历天、设计工期15日历天。勘察15日历天、设计工期15日历天。勘察15日历天、设计工期15日历天。勘察15日历天、设计工期15日历天</div>
                    </div>
                    <div class="layui-btn-box">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-bg-green">选用</button>
                    </div>

                    <div class="item-text">
                        <div>
                            <span>《项目名称》</span>
                            <span>ZBGQ01010101</span>
                        </div>
                        <div>30日历天。其中: 勘察15日历天、设计工期15日历天。勘察15日历天、设计工期15日历天。勘察15日历天、设计工期15日历天。勘察15日历天、设计工期15日历天</div>
                    </div>
                    <div class="layui-btn-box">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-bg-green">选用</button>
                    </div>
                </div>
            </div>
        </div>
    </use-body>
</body>
<script>
    layui.use('table', function () {
        var $ = layui.$;
        var tree = layui.tree;
        var util = layui.util;
        var laypage = layui.laypage
        // 自定义排版
        laypage.render({
            elem: 'demo-laypage-layout',
            count: 1000,
            layout: ['page', 'prev', 'next']
        });

        $('.collapseBtn').click(function () {
            $(this).find('.layui-icon').toggleClass('layui-icon-down')
            $('.tenders-info').toggle()
        })


        // 模拟数据
        var data = [{ title: '江西', id: 1, children: [{ title: '南昌', id: 1000, children: [{ title: '青山湖区', id: 10001 }, { title: '高新区', id: 10002 }] }, { title: '九江', id: 1001 }, { title: '赣州', id: 1002 }] }, { title: '广西', id: 2, children: [{ title: '南宁', id: 2000 }, { title: '桂林', id: 2001 }] }, { title: '陕西', id: 3, children: [{ title: '西安', id: 3000 }, { title: '延安', id: 3001 }] }, { title: '山西', id: 3, children: [{ title: '太原', id: 4000 }, { title: '长治', id: 4001 }] }];
        // 渲染
        tree.render({
            elem: '#ID-tree-demo-showLine',
            data: data,
            showLine: false,  // 是否开启连接线
            click: function (obj) {
                // 点击高亮
                $(".layui-tree-set").removeClass('layui-tree-set-active');
                obj.elem.addClass('layui-tree-set-active');
            }
        });
    });
</script>

<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    import dataJson from './data.json'  assert {type: 'json'};


    createApp({
        setup() {
            const data = dataJson

            const fun = (item) => {
                console.log(item)
            }
            return {
                data,
                fun
            }
        }
    }).mount('#app')
</script>

</html>